<template>
  <view>
    <navbar title="我的收藏" mode="bgColor">
      <template v-slot:bottom>
        <TiyanDialog :nav="true"></TiyanDialog>
      </template>
    </navbar>
    <view class="result-container flex-col align-center">
      <image src="@/static/wrong/bj.png" mode="widthFix" class="bg"/>
      <view class="flex-col inner-container">
        <view class="flex-row tab-container self-center">
          <view :class="['tab center', tabIndex===1 ? 's' : 'n']" @click="tabIndex=1">科目一</view>
          <view :class="['tab center', tabIndex===4 ? 's' : 'n']" @click="tabIndex=4">科目四</view>
        </view>
        <view class="flex-row content-container">
          <view class="f1">
            <view class="item center flex-col" @click="goDetail(1)">
              <text class="count">{{ collectTodayCount }}</text>
              <view class="label">今日收藏
                <image class="arrow" src="@/static/wrong/arrow.png" mode="widthFix"/>
              </view>
            </view>
          </view>
          <view class="f1">
            <view class="item center flex-col" @click="goDetail(0)">
              <text class="count">{{ collectTotalCount }}</text>
              <view class="label">全部收藏
                <image class="arrow" src="@/static/wrong/arrow.png" mode="widthFix"/>
              </view>
            </view>
          </view>
        </view>
      </view>
      <image src="@/static/wrong/jingxuanti.png" mode="widthFix" class="jingxuanti" @click="toRight"/>
    </view>
    <image src="https://down.qwdata.vip/app_icon/1702746527791" mode="widthFix" class="monikaochang"
           @click="goTo('mijuan')"></image>
    <ADInterstitial ref="ADInterstitial"></ADInterstitial>
  </view>
</template>

<script>
import navbar from '@/components/navbar'
import {mapGetters} from 'vuex'
import ADInterstitial from "@/components/ADInterstitial.vue";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {
    TiyanDialog,
    ADInterstitial,
    navbar
  },
  data() {
    return {
      tabIndex: 1,
    }
  },
  computed: {
    ...mapGetters(['isKemu1VIP', 'isKemu4VIP']),
    ...mapGetters('question', ['kemu1', 'kemu4']),
    kemuVIP() {
      if (this.tabIndex === 1) {
        return this.isKemu1VIP
      }
      return this.isKemu4VIP
    },
    collectTodayCount() {
      if (this.tabIndex === 1) {
        return this.kemu1.collectTodayCount
      } else {
        return this.kemu4.collectTodayCount
      }
    },
    collectTotalCount() {
      if (this.tabIndex === 1) {
        return this.kemu1.collectTotalCount
      } else {
        return this.kemu4.collectTotalCount
      }
    },
  },
  onLoad({kemu = '1'}) {
    this.kemu = kemu
    if (kemu === '4') {
      this.tabIndex = 4
    }
    this.$nextTick(() => {
      this.$refs.ADInterstitial.tryOpen()
    })
  },
  methods: {
    async goDetail(today) {
      if (today) {
        if (!this.collectTodayCount) {
          return
        }

        uni.navigateTo({
          url: '/pages/detail/detail?title=今日收藏&type=collect&today=1&kemu=' + this.tabIndex
        })
      } else {
        if (!this.collectTotalCount) {
          return
        }

        uni.navigateTo({
          url: '/pages/detail/detail?title=全部收藏&type=collect&today=0&kemu=' + this.tabIndex
        })
      }
    },
    select(i) {
      this.tabIndex = i
    },
    toRight() {
      uni.navigateTo({
        url: '/pages/detail/detail?type=jingxuan&title=精选题库&kemu=' + this.tabIndex,
      });
    },
    goTo() {
      uni.navigateTo({
        url: '/pages/mijuan/mijuan?kemu=1'
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.bgColor {
  background-color: #f5f5f5;
}

.result-container {
  position: relative;
  margin: 10rpx 30rpx 30rpx 30rpx;

  .bg {
    width: 100%;
  }

  .inner-container {
    position: absolute;
    top: 0rpx;
    width: 100%;
    height: 300rpx;

    .tab-container {
      margin-top: 40rpx;
      margin-bottom: 36rpx;
      height: 70rpx;
      border-radius: 35rpx;
      background-color: #fff;

      .tab {
        width: 160rpx;
        border-radius: 35rpx;
        font-size: 26rpx;

        &.s {
          font-family: PingFangSC-Semibold;
          color: #FFFFFF;
          font-weight: 600;
          background: #3E7EFE;
        }

        &.n {
          font-family: PingFangSC-Regular;
          color: #000000;
          font-weight: 400;
        }
      }
    }

    .content-container {
      .item {
        .count {
          font-family: PingFangSC-Regular;
          font-size: 44rpx;
          color: #4E4E4E;
          font-weight: 400;
        }

        .label {
          margin-top: 20rpx;
          font-family: PingFangSC-Medium;
          font-size: 32rpx;
          color: #000000;
          font-weight: 500;
        }

        .arrow {
          width: 12rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .jingxuanti {
    position: absolute;
    bottom: 40rpx;
    width: 618rpx;
  }
}

.monikaochang {
  margin-left: 36upx;
  width: calc(100vw - 72upx);
}
</style>
